<template>
	<div class="container">
	
		<div class="appName">
			<!--界面头部 开始-->
			<div>
				<img src="../assets/logo.png" />
			</div>
		</div>
		<div class="loginForm">
			<div class="loginForm_left">
				<!--左侧 img -->
				<img src="../assets/logo-left.png" />
			</div>
				<!--右侧 登陆表格-->
			<div class="loginForm_right">
			<div class="loginCard">
					<div class="input_title">
						<img src="../assets/login.png"  />
					</div>
					<div class="input_item">
					<input type="text" v-model="ruleForm.username" placeholder="用户名"  />
					<input type="password" placeholder="密码" v-model="ruleForm.password"  />
					</div>
					<div class="input_bottom">
						<a href="#" v-on:click="doLogin">
							<img src="../assets/denglu.jpg" alt="" />
						</a>
					</div>
					</div>
			</div>
			
			<!--main 结束-->
			<!--footer 底部版权信息开始-->
		
			<!--footer 底部版权信息结束-->
		</div>
		<div  class="licence">
				版权所有：润华集团股份有限公司 鲁ICP备 12022272号 Copyright &copy; 2009-2013 runhua All Rights Reserved
		</div>
	</div>
</template>
<script>
import md5 from "md5";
module.exports = {
  data: function() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    doLogin: function() {
      // 验证通过

      //调用登录接口
      this.$http({
        method: "POST",
        url: this.API_ROOT + "/rbac/login/doLogin",
        params: {
          username: this.$data.ruleForm.username.replace(/^\s+|\s+$/g, ""),
          password: md5(this.$data.ruleForm.password)
        }
      }).then(
        function(resp) {
          if (resp.data.success) {
            window.localStorage.setItem("isAdmin", resp.data.data.isAdmin);
            window.localStorage.setItem("uid", resp.data.data.uid);
            window.localStorage.setItem("token", resp.data.data.token);
            window.localStorage.setItem("userName", resp.data.data.user.uName);
            window.localStorage.setItem("deptId", resp.data.data.org.deptId);
            window.localStorage.setItem(
              "deptName",
              resp.data.data.org.deptName
            );
            window.localStorage.setItem(
              "companyId",
              resp.data.data.org.companyId
            );
            window.localStorage.setItem(
              "companyName",
              resp.data.data.org.companyName
            );
            this.$router.push("/main");
          } else {
            this.$message.error(resp.data.msg);
          }
        },
        function(error) {
          // error
        }
      );
    }
  }
};
</script>

<style>
html body {
 position:absolute;
top:0;
left:0;
bottom:0;
right:0;
  
}
.container {
  	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
  background-color: #409eff;
  text-align: center;
}

.appName {
  
  width: 100%;
  margin-top: 60px;
  text-align: center;

}
.loginForm{
	width: 806px;
	height: 480px;
	display: block;

	text-align: center;
	margin-top: 65px;
	margin-left:auto;
	margin-right: auto; 
}
.loginForm_left{
	float: left;
	width: 360px;
	height: 360px;
	text-align: right;
	margin-right: 20px;
}
.loginForm_left >img{
	position: relative;
	top:30px;
	width: 360px;
	height: auto;
}
.loginForm_right{
	float: left;
	width: 400px;
	height: 400px;
	margin-left: 15px;
}
.loginCard{
	width: 300px;
	margin-left: 35px;
	background-color: white;
	margin-top:55px; 
	text-align: center;
	border-radius: 10px;
}
.input_title{
	margin-top: 35px;
	width: 240px;
	text-align: center;
	margin-left:auto;
	margin-right: auto; 
}
.input_title > img{
	position: relative;
	top:-45px;
}
.input_item {
	position: relative;
	top:-45px;
	width: 240px;
	text-align: center;
	margin-left:auto;
	margin-right: auto; 
	
}
.input_bottom{
	width: 240px;
	text-align: center;
	
}	
.input_bottom > a > img{
	width: 240px;
	text-align: center;
	position: relative;
	top:-30px;
	left: 30px;
	right: 30px;
	border-radius: 15px;
	
}

.input_item > input{
	width: 100%;
	height: 40px;
	margin-top:5px; 
	margin-bottom:20px;
	border-radius: 5px;
	border: 0px;
	background-color:whitesmoke;
	text-align: center;
}
.licence{

	width: 100%;
	text-align: center;
	color: white;
	position: absolute;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
	bottom: 15px;	
}

/*页面CSS样式 开始*/

/*页面CSS样式 结束*/
</style>